
<template>
  <div style="flex-direction: column;display: flex;">
    <div style="text-align: center">
      <el-avatar v-if="base64Avatar" :src="base64Avatar"
                 style="width: 120px;
                 height: 120px;
                 margin-top: 10px"
                 class="avatar" />
      <el-avatar v-else
                 v-bind:style="{cursor:'pointer'}"
                 style="width: 120px;
                 margin-top: 10px;
                 height: 120px"

                 fit="fit"
                 src="/images/avatar.jpeg"/>
    </div>
    <div style="margin-top: 50px;flex-direction: column;text-align: center;display: flex;justify-content: space-between">
      <div>
        <el-text>uid:{{uid}}</el-text>
      </div>
      <div>
        <el-text>用户名:{{userName}}</el-text>
      </div>
      <div>
        <el-text>
          入站时间: {{createTime}}
        </el-text>
      </div>
      <div>
        <el-text>
          职位：{{userRole}}
        </el-text>
      </div>

    </div>

  </div>
</template>


<script setup>

import {ref, watch} from "vue";

import {getWithToken} from "@/net/postAndGetMethodWithToken";


const props = defineProps(["uid","userRole","createTime"])
const userName = ref('')

getWithToken('/api/user/one?uid='+props.uid,(data,code,message)=>{
    userName.value = data.userName
},()=>{
    return false
})

const base64Avatar = ref()
watch(props, (newValue, oldValue) => {
  if (newValue) {
    getWithToken(`/api/avatar/downloadByUid?uid=${newValue.uid}`,
        (data,code,message) =>{
          base64Avatar.value = data
        },(data,code,message) => {
          return false
        })
  }
})



</script>

<style scoped>

</style>